<template>
  <div>
    <v-card>
      <v-toolbar color="deep-purple accent-4" dark flat>
        <v-btn icon @click="$router.push('/')">
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
        <v-toolbar-title>我的订单</v-toolbar-title>
      </v-toolbar>
      <v-tabs v-model="tab" fixed-tabs>
        <v-tab v-for="item in items" :key="item.tab">{{ item.tab }}</v-tab>
      </v-tabs>
      <v-tabs-items v-model="tab">
        <v-tab-item v-for="(item, a) in items" :key="a">
          <div>
            <!-- <v-card-text>{{ item.content }}</v-card-text> -->
            <template v-for="(ib, b)  in items[a].content">
              <v-card outlined :key="b" v-if="ib.state > 0" class="mx-3">
                <div class="zy">
                  <v-checkbox
                    v-model="ib.xz"
                    @change="onChange(ib.xz,ib.ID,ib.money)"
                    :true-value="true"
                    :false-value="false"
                    v-if="ib.state==1"
                    class="nbx"
                  />
                  <van-card
                    :key="ib.ID"
                    :num="ib.sum"
                    :title="ib.name"
                    :thumb="ib.itemInfo.imgs[0].url"
                    style="width:100%"
                  />
                </div>
                <!-- </van-checkbox> -->
                <div class="d-flex mr-1 s-around">
                  <van-tag
                    plain
                    type="primary"
                  >总计:{{ib.money.sum.CNY/100}}元 {{ib.money.sum.point}}积分</van-tag>
                  <a :href="wxURL+ib.ID" v-if="ib.state == 1" small color="blue light-3">去支付</a>
                  <v-btn @click="send(ib.ID,0)" v-if="ib.state == 1" text icon color="indigo">
                    <v-icon>mdi-delete</v-icon>
                  </v-btn>
                  <v-btn @click="send(ib.ID,4)" v-if="ib.state == 2" small color="red">确认收货</v-btn>
                  <v-btn disabled v-if="ib.state == 3" small color="red">已完成</v-btn>
                </div>
                <!-- </van-checkbox> -->
                <!-- <div>{{items[a].content[b].items}}</div> -->
              </v-card>
            </template>
            <!-- <div :key="i">{{i.ID}}</div> cart-outline-->
          </div>
        </v-tab-item>
      </v-tabs-items>
    </v-card>
    <v-bottom-navigation v-if="ids.length>0">没有更多了</v-bottom-navigation>
    <v-bottom-navigation class="foot" v-if="ids.length>0">
      <a
        :href="wxURL+encodeURIComponent(JSON.stringify(ids))"
        small
        color="blue light-3"
        style="width: 100%;height: 100%"
      >
        <v-btn value="recent" style="width: 100%;height: 100%;max-width: 100%;">
          <span style="display: flex;font-size: 1rem;">
            <h4 style="font-size:12px;color:red;">{{money.CNY/100}}元 {{money.point}}积分</h4>合并支付
          </span>
          <v-icon>mdi-cart-outline</v-icon>
        </v-btn>
      </a>
    </v-bottom-navigation>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tab: null,
      items: [
        { tab: "全部", content: [] },
        { tab: "待付款", content: [] },
        { tab: "待收货", content: [] },
        { tab: "已完成", content: [] }
      ],
      timer: false,
      ids: [],
      money: { CNY: 0, point: 0 },
      wxURL:
        "http://api.x7654.cn/api/wxpay/jsapi.php?retURL=" +
        encodeURIComponent(window.location.href) +
        "&ID="
    };
  },
  methods: {
    onChange(a, b, c) {
      if (a) {
        this.ids.push(b);
        this.money.CNY += c.sum.CNY - c.payment.CNY;
        this.money.point += c.sum.point - c.payment.point;
      } else {
        let t = [];
        for (let i = 0; i < this.ids.length; i++) {
          if (this.ids[i] != b) {
            t.push(this.ids[i]);
          }
        }
        this.ids = t;
        // console.log(this.$cp(c));
        this.money.CNY -= c.sum.CNY - c.payment.CNY;
        this.money.point -= c.sum.point - c.payment.point;
      }
    },
    sent(id, state) {
      const info = {
        cmd: 1,
        val: {
          token: localStorage.token,
          table: "orders",
          state: state,
          where: {
            ID: id
          }
        }
      };
      // console.log(a);
      this.$axios.post("q.php", info).then(res => {
        // console.log(res.data, info);
        if (res.data.result) {
          const data = this.items[0].content;
          for (let i = 0; i < data.length; i++) {
            if (data[i].ID == id) {
              data[i].state = state;
              break;
            }
          }
        }
      });
    },
    recv() {
      const d = {
        cmd: 0,
        val: {
          token: localStorage.token,
          table: "orders",
          other: " ORDER BY changeTime DESC,state asc"
        }
      };
      this.$axios.post("q.php", d).then(a => {
        if (a.data.result) {
          a.data.result.formatData();
          let tmp = a.data.result;
          this.items[0].content = tmp;
          for (let i = 0; i < tmp.length; i++) {
            if (tmp[i].state < 3) {
              if (tmp[i].state === 1) {
                tmp[i].xz = true;
                this.ids.push(tmp[i].ID);
                this.money.CNY +=
                  tmp[i].money.sum.CNY - tmp[i].money.payment.CNY;
                this.money.point +=
                  tmp[i].money.sum.point - tmp[i].money.payment.point;
              }
              this.items[tmp[i].state].content.push(tmp[i]);
            } else this.items[3].content.push(tmp[i]);
          }
        }
      });
    }
  },
  created() {
    this.timer = true;
    this.recv();
  },
  destroyed() {
    this.timer = false;
  }
};
</script>
<style  scoped>
.bx {
  border: 1px solid rgb(255, 0, 0);
}
.s-around {
  justify-content: space-between;
  align-items: center;
}
.zy {
  display: flex;
}
.nbx {
  flex-grow: 0;
  flex-shrink: 0;
}
.foot {
  position: fixed;
  /* border: 1px solid rgb(255, 0, 0); */
}
</style>